<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提供超多组件的网站开发框架-Federal官方网站</title>
    <link  rel="stylesheet" href="../../src/federal/js/vendors/animate/animate.min.css">
</head>
<body>
   <div class="column header clearfix" >
       <div class="index-header">
           <div class=" column column-1200">
               <div class="pull-left">
                   <a href="/" >
                       <img src="/src/component/xht/images/logo.png" alt="logo">
                   </a>
               </div>
               <div class="pull-right">
                   <a href="nav.html" target="_blank">nav组件</a>
                   <a href="content.html" target="_blank">内容组件</a>
                   <a href="tabs.html" target="_blank">tab组件</a>
                   <a href="slide.html" target="_blank">slide组件</a>
                   <a href="form.html" target="_blank">form组件</a>
                   <a href="page.html" target="_blank">分页组件</a>
                   <a href="app_change.html" target="_blank">其他组件</a>
               </div>
           </div>
       </div>
       <div class="column column-1200">
           <div class="index-content">
               <h1 >Rederal</h1>
               <p id="content-p">提供超多组件的网站开发框架</p>
               <a href="https://git.oschina.net/starryskyTeam/federal/blob/master/README.md" target="_blank" class="left-a active">开始使用</a>
               <a href="https://git.oschina.net/starryskyTeam/federal" target="_blank" class="right-a">贡献代码</a>
           </div>
       </div>
   </div>
   <div class="column column-1200">
       <div class="block block-index-1">
            <div class="block-title">
                <h2>
                    <span>Rederal</span>
                    <span class="span2">优势</span>
                </h2>
            </div>
           <div class="block-content">
               <div class="content">
                   <img src="/src/component/xht/images/good1.jpg" alt="">
                   <h3>容器与内容分离</h3>
                   <p>基于OOCSS(Object Oriented css)设计，结构与皮肤分离，容器与内容分离。</p>
               </div>
               <div class="content">
                   <img src="/src/component/xht/images/good2.jpg" alt="">
                   <h3>组件化开发方式</h3>
                   <p>提供7个组件库，接近30个常用组件，可快速构建界面出色的网站，大幅度提升开发效率。</p>
               </div>
               <div class="content">
                   <img src="/src/component/xht/images/good3.jpg" alt="">
                   <h3>紧跟潮流</h3>
                   <p>采用webpack+scss开发，拥抱npm体系，拥有完善开发和发布机制。</p>
               </div>
           </div>
       </div>
   </div>
   <div class="column">
       <div class="index-footer">
          <p>Copyright ©2017 All Rights Reserved| 文明办网文明上网</p>
           <p>举报电话:010-82615762| 违法不良信息举报中心</p>
           <p>版权所有：北京云动时代</p>
       </div>
   </div>
<script src="../../src/federal/js/vendors/jquery-1.10.2/jquery.js"></script>
<script>
    $(function(){
        $('h1').hover(function(){
            $(this).addClass('animated  bounceIn')
        });
        $('.index-header a').hover(function(){
            $(this).siblings().removeClass('animated  bounceInDown').css("color","#fff");
            $(this).addClass('animated  bounceInDown').css("color","#02b2b5")
        });
       $(".index-content a").mouseover(function(){
           $(this).siblings("a").removeClass("active");
           $(this).addClass("active");
       });
        $('.content img').hover(function(){
            $(this).addClass('animated  fadeInLeft')
        },function(){
            $(this).removeClass('animated fadeInLeft')
        });

    });
</script>
</body>
</html>